<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        我我我我我我我{{message}}嚄嚄喔喔喔喔喔哦我我哦我
    </div>
    <script>
        // let obj = Object.defineProperty({}, "name", {
        //     configurable: true,
        //     enumerable: true,
        //     get() {
        //         return "嘎嘎嘎"
        //     },
        //     set(newvalue) {
        //         console.log(setnewvalue)
        //     }
        // })
        // console.log(obj)

        // let obj = { name: "嘎嘎嘎", age: 20 }
        // function observe(obj) {
        //     let keys = Object.keys(obj)
        //     keys.forEach(key => {
        //         let val = obj[key]
        //         Object.defineProperty(obj, key, {
        //             configurable: true,
        //             enumerable: true,
        //             get() {
        //                 console.log("get")
        //                 return val
        //             },
        //             set(newvalue) {
        //                 console.log(newvalue)
        //             }
        //         })
        //     })
        // }
        // observe(obj)
        // obj.name
        let appin = document.querySelector("#app")
        let childNodes = appin.childNodes
        let textContent = childNodes[0].textContent
        let reg = /{{(\w+)}}/g
        let key;
        if (reg.test(textContent)) {
            key = RegExp.$1
        }
        let data = Object.defineProperty({}, "message", {
            configurable: true,
            enumerable: true,
            get() {
                console.log("get")
                return "deep dark fantisty"
            },
            set(newvale) {
                console.log(newvalue)
                let oldvalue = data[key]
                let reg = new RegExp(oldvalue)
                childNodes[0].textContent = childNodes[0].textContent.replace(reg, "deep dark fantisty")
            }
        })
        childNodes[0].textContent = textContent.replace(reg, data[key])
    </script>
</body>

</html>